<template>
  <div>
    <canvas width="700" height="500" ref="canvas"></canvas>
    <div class="ui"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Stage } from './game/core/Stage';
import { Scene } from './game/core/Scene';
import { Rect } from './game/objs/Rect';
import { Ball } from './game/objs/Ball';

const canvas = ref<HTMLCanvasElement>();
let stage: Stage | null = null;

onMounted(() => {
  if (!canvas.value) return;
  
  // Initialize stage
  stage = new Stage(canvas.value);
  
  // Create initial scene
  const scene = new Scene();
  stage.setScene(scene);
  // scene.add(new Rect(100,50))
  let ball = new Ball()
  ball.position.x = 100
  ball.position.y = 50
  scene.add(ball)
  // Start game loop
  stage.start();
});
</script>
sk-bb77474e2b8842a6ae9119053e96b467
<style scoped>
canvas{
  border: 1px solid black;
}
</style>
